<template>
    <div :style="menuStyle" class="antMenu">
        <a-menu :mode="mode" :theme="theme" :inline-collapsed="collapsed" @openChange="onOpenChange">
            <template v-for="item in list">
                <a-menu-item v-if="!item.children" :key="item.id">
                    <div v-if="item.path">
                        <router-link :to="item.path">
                            <i class="ant-menu-icon nav-icon " :class="item.meta.icon" /><span>{{item.meta.name || item.name || ""}}</span>
                        </router-link>
                    </div>
                    <div v-else>
                        <a>
                            <i class="ant-menu-icon nav-icon " :class="item.meta.icon" /><span>{{item.meta.name || item.name || ""}}</span>
                        </a>
                    </div>
                </a-menu-item>
                <sub-menu v-else :collapsed="collapsed" :key="item.id" :menu-info="item" />
            </template>
        </a-menu>
    </div>
</template>

<script>

import { Menu } from 'ant-design-vue';
import { routerTo } from "@/utils/routerUtils";


const SubMenu = {
    template: `
      <a-sub-menu :key="menuInfo.id" :sub-menu-close-delay="0.1" v-bind="$props" v-on="$listeners">
        <div slot="title">
          <i class="ant-menu-icon nav-icon " :class="menuInfo.meta.icon"   /><span v-show="!collapsed">{{menuInfo.meta.name || menuInfo.name || ""}}</span>
        </div>
        <template v-for="(item,index) in menuInfo.children">
          <a-menu-item :title="item.name" v-if="!item.children" :key="item.id" >
            <div v-if="item.path">
              <router-link :to="item.path">
                <i class="ant-menu-icon nav-icon " :class="item.meta.icon"   /><span>{{item.meta.name || item.name || ""}}</span>
              </router-link>
            </div>
            <div v-else>
              <a>
                <i class="ant-menu-icon nav-icon " :class="item.meta.icon"   /><span>{{item.meta.name || item.name || ""}}</span>
              </a>
            </div>
          </a-menu-item>
          <sub-menu v-else :key="item.id" :menu-info="item" />
        </template>
      </a-sub-menu>
    `,
    name: 'SubMenu',
    // must add isSubMenu: true
    isSubMenu: true,
    props: {
        ...Menu.SubMenu.props,
        // Cannot overlap with properties within Menu.SubMenu.props
        menuInfo: {
            type: Object,
            default: () => ({}),
        },
        collapsed: {
            type: Boolean,
            default: false,
        }
    },
};



export default {
    name: "AntMenu",
    components: {
        'sub-menu': SubMenu,
    },
    props: {
        menus: {
            type: Array,
            default: () => []
        },
        theme: {
            type: String,
            default: "dark"
        },
        mode: {
            type: String,
            default: "inline"
        },
        menuStyle: {
            type: String,
            default: "height:calc(100vh - 160px)"
        },
        collapsed: {
            type: Boolean,
            default: false,
        }
    },
    data () {
        return {
            // list: this.menus,
            openKeys: [],
            rootSubmenuKeys: [],
            inlineIndent: 13
        };
    },
    created () {
        this.rootSubmenuKeys = this.getRootSubmenuKeys(this.menus) || [];
        // this.$store.getters.menus && this.$store.getters.menus[0].children

        console.log('菜单json>:', this.menus)
    },
    computed: {
        list: function () {
            return this.menus;
        },
        selectedKeys: function () {
            //   console.log("AntMenu_this.$route",this.$route);
            return [this.$route.meta.id || ""];
        }
    },
    methods: {
        //获取
        getRootSubmenuKeys (tree) {
            return tree && tree.map(element => {
                return element.id;
            });
        },
        //路由跳转
        goPage (url) {
            //   console.log("url",url)
            this.$router.push({ path: url });
        },
        onOpenChange (openKeys) {
            // console.log("onOpenChange_openKeys",openKeys,this.rootSubmenuKeys)
            const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            // console.log("latestOpenKey",latestOpenKey)
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                this.openKeys = openKeys;
            } else {
                this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
            // console.log("this.openKeys",this.openKeys)
        },
    },
};
</script>
<style lang="less">
    .left-nav-bar {
        .ant-menu a {
            color: #fff !important;
        }
    }
    .ant-menu-vertical {
        .ant-menu-item {
            margin: 4px 0px;
            height: 40px !important;
            line-height: 40px !important;
        }
        .ant-menu-submenu-title {
            height: 40px !important;
            line-height: 32px !important;
        }
    }
    .ant-menu-vertical.ant-menu-submenu-content {
        .ant-menu-item {
            margin: 4px 0px;
            height: 30px !important;
            line-height: 30px !important;
        }
    }
    .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
        padding: 5px 32px !important;
    }

    .ant-menu-horizontal {
        border-bottom: 1px solid #ccc;
    }
</style>

